Pure.CSS হল একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক যা আপনাকে রেসপন্সিভ ওয়েব ডিজাইন তৈরি করতে সাহায্য করে। এটি সহজে কাস্টমাইজযোগ্য এবং দ্রুত লোড হয়, বিশেষত যখন আপনি Images এবং Media Queries ব্যবহার করতে চান। Pure.CSS এর সাহায্যে ইমেজ এবং মিডিয়া কুয়েরি ব্যবহারের মাধ্যমে আপনি ওয়েব পেজগুলোকে মোবাইল এবং ডেস্কটপে সুন্দরভাবে প্রদর্শন করতে পারেন।
Pure.CSS এর ইমেজের জন্য ব্যবহৃত স্টাইলিং:
Pure.CSS ইমেজগুলোর জন্য সাধারণ স্টাইলিং সরবরাহ করে, যাতে আপনার ওয়েব পেজের ইমেজগুলো স্বয়ংক্রিয়ভাবে সুন্দরভাবে মানিয়ে যায়। এর মধ্যে অন্যতম স্টাইল হল:
- Responsive Images: Pure.CSS
pure-imgক্লাস ব্যবহার করে ইমেজগুলোকে রেসপন্সিভ বানাতে সহায়তা করে। এর মাধ্যমে ইমেজটি পেজের প্রস্থ অনুযায়ী অটোমেটিকালি আকার পরিবর্তন করবে।
উদাহরণ: Responsive Image ব্যবহার করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Images</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>Responsive Image Example</h2>
<img src="https://via.placeholder.com/800x400" alt="Example Image" class="pure-img">
</div>
</body>
</html>
ব্যাখ্যা:
- pure-img: Pure.CSS এর
pure-imgক্লাস ইমেজকে রেসপন্সিভ করে তোলে। এর মাধ্যমে ইমেজটি পেজের প্রস্থ অনুযায়ী নিজে থেকেই আকার পরিবর্তন করবে। - ইমেজের প্রস্থ 100% রাখা হয়, এবং এর উচ্চতা প্রস্থ অনুযায়ী অটোমেটিকালি পরিবর্তিত হয়, ফলে এটি মোবাইল এবং ডেস্কটপ স্ক্রীনে সুন্দরভাবে উপস্থাপিত হয়।
২. Media Queries (মিডিয়া কুয়েরি) ব্যবহার:
Media Queries হল একটি CSS প্রযুক্তি যা আপনাকে ওয়েব পেজের লেআউট পরিবর্তন করার সুযোগ দেয়, যার মাধ্যমে আপনি বিভিন্ন স্ক্রীন সাইজের জন্য আলাদা স্টাইল প্রয়োগ করতে পারেন। Pure.CSS এ Media Queries ব্যবহার করতে, আপনাকে সাধারণ CSS মিডিয়া কুয়েরি ট্যাগ ব্যবহার করতে হবে।
উদাহরণ: Media Queries ব্যবহার করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Media Queries</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
body {
font-family: Arial, sans-serif;
}
.container {
padding: 20px;
}
/* Default Layout for Desktop */
.content {
background-color: lightblue;
padding: 20px;
}
/* Media Query for mobile screens */
@media (max-width: 600px) {
.content {
background-color: lightcoral;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<h2>Responsive Design with Media Queries</h2>
<div class="content">
<p>This section changes color based on screen size. Resize the window to see the effect.</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- @media (max-width: 600px): এই মিডিয়া কুয়েরি 600px এর কম প্রস্থের ডিভাইসে (যেমন মোবাইল) বিশেষ স্টাইল প্রয়োগ করে। এটি lightcoral ব্যাকগ্রাউন্ড কালার এবং ছোট প্যাডিং প্রযোজ্য করে মোবাইল ডিভাইসে।
- Desktop Layout: বড় স্ক্রীনে, ডিফল্ট স্টাইল (যেমন lightblue ব্যাকগ্রাউন্ড) কার্যকর হবে।
৩. Images with Media Queries:
মিডিয়া কুয়েরি ব্যবহার করে আপনি ইমেজগুলির আকার এবং অবস্থানও কাস্টমাইজ করতে পারেন, যা ডিভাইস অনুযায়ী সঠিকভাবে রেন্ডার হবে। উদাহরণস্বরূপ, মোবাইল স্ক্রীনে বড় ইমেজ ছোট করা এবং ডেস্কটপে পূর্ণ আকারে দেখানো।
উদাহরণ: ইমেজ আকার পরিবর্তন করা মিডিয়া কুয়েরি দিয়ে
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image with Media Queries</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
img {
width: 100%;
max-width: 800px;
height: auto;
}
/* Media Query for smaller screens */
@media (max-width: 600px) {
img {
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h2>Responsive Image with Media Queries</h2>
<img src="https://via.placeholder.com/800x400" alt="Example Image">
</div>
</body>
</html>
ব্যাখ্যা:
- img: ইমেজের জন্য width: 100% ব্যবহার করা হয়েছে, যাতে এটি পেজের প্রস্থ অনুযায়ী আকার পরিবর্তন করে। max-width: 800px সেট করা হয়েছে, যাতে ইমেজটি 800px এর বেশি বড় না হয়।
- @media (max-width: 600px): মোবাইল স্ক্রীনে (600px এর কম প্রস্থে) ইমেজটি সম্পূর্ণ প্রস্থে (100%) প্রদর্শিত হবে, তবে ডেস্কটপ স্ক্রীনে এটি max-width: 800px এর মধ্যে সীমাবদ্ধ থাকবে।
Pure.CSS ব্যবহার করে Images এবং Media Queries দিয়ে আপনি সহজেই রেসপন্সিভ ওয়েব ডিজাইন তৈরি করতে পারেন। Pure.CSS এর pure-img ক্লাস এবং Media Queries ব্যবহার করে ইমেজ এবং কন্টেন্টের উপস্থাপন দ্রুত এবং সহজে কাস্টমাইজ করা সম্ভব। মিডিয়া কুয়েরি দিয়ে আপনি ইমেজ এবং কন্টেন্টের সাইজ বিভিন্ন স্ক্রীন সাইজ অনুযায়ী সহজেই অ্যাডজাস্ট করতে পারবেন, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে সুন্দরভাবে প্রদর্শিত হবে।
Pure.CSS ব্যবহার করে Responsive Images তৈরি করা খুবই সহজ এবং কার্যকরী। ওয়েব ডেভেলপমেন্টে Responsive Images মানে এমন ছবি যা স্বয়ংক্রিয়ভাবে স্ক্রীনের আকার অনুযায়ী নিজেকে মানিয়ে নেয়, যাতে যে কোন ডিভাইসে (মোবাইল, ট্যাবলেট, ডেস্কটপ) সঠিকভাবে প্রদর্শিত হয়।
Pure.CSS নিজে কোনো বিশেষ ইমেজ স্টাইলিং ক্লাস প্রদান না করলেও, CSS এর মাধ্যমে max-width, height, এবং width প্রপার্টি ব্যবহার করে খুব সহজেই ইমেজগুলিকে রেসপনসিভ করা সম্ভব।
এখানে Pure.CSS ব্যবহার করে Responsive Images তৈরি করার কিছু পদ্ধতি দেওয়া হলো:
1. Simple Responsive Image (Using CSS)
একটি সহজ এবং কার্যকরী পদ্ধতি হল ইমেজের জন্য max-width এবং height প্রপার্টি ব্যবহার করা, যাতে ইমেজের প্রস্থ ডিভাইসের স্ক্রীন সাইজ অনুযায়ী অটোমেটিক্যালি মানিয়ে নেয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Make the image responsive */
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/1200x800" alt="Responsive Image">
</body>
</html>
ব্যাখ্যা:
max-width: 100%;: এই প্রপার্টি নিশ্চিত করে যে ইমেজটি তার কনটেইনারের প্রস্থের সাথে মানিয়ে নিবে এবং কখনও 100% এর বেশি প্রস্থ নিবে না।height: auto;: এই প্রপার্টি দিয়ে ইমেজের উচ্চতা স্বয়ংক্রিয়ভাবে সমন্বিত হয়, যাতে ইমেজের আন্ডারস্ট্যান্ডিং হার অক্ষুণ্ণ থাকে।display: block;: ইমেজটি ব্লক উপাদান হিসেবে প্রদর্শিত হবে, যাতে এটি প্যারাগ্রাফ বা অন্যান্য উপাদানের মত নিজে থেকে নতুন লাইনে আসে।margin: 0 auto;: ইমেজটিকে সেন্টার করতে ব্যবহৃত হয়েছে।
এটি একটি খুবই সাধারণ এবং কার্যকরী উপায়, যেখানে ইমেজটি রেসপনসিভ হবে এবং স্ক্রীনের আকারের সাথে মানিয়ে যাবে।
2. Responsive Images with srcset Attribute
অন্য একটি পদ্ধতি হল srcset অ্যাট্রিবিউট ব্যবহার করা। এটি বিভিন্ন স্ক্রীন সাইজের জন্য ভিন্ন ভিন্ন ইমেজ সরবরাহ করে, যাতে উচ্চ রেজোলিউশনের ডিভাইসে বড় ইমেজ এবং কম রেজোলিউশনের ডিভাইসে ছোট ইমেজ লোড করা যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
</style>
</head>
<body>
<img srcset="https://via.placeholder.com/1200x800 1200w,
https://via.placeholder.com/800x533 800w,
https://via.placeholder.com/400x267 400w"
sizes="(max-width: 600px) 400px, 800px"
src="https://via.placeholder.com/1200x800" alt="Responsive Image">
</body>
</html>
ব্যাখ্যা:
srcset: এখানে আপনি একাধিক ছবি (বিশেষ আকারে) সংজ্ঞায়িত করেছেন। এটি ব্রাউজারকে জানায় যে কোন আকারের ছবি কোন পরিস্থিতিতে ব্যবহার করা হবে।1200w: একটি বড় ছবি যা বড় স্ক্রীনে ব্যবহার হবে।800w: একটি মাঝারি আকারের ছবি যা মিডিয়াম স্ক্রীনে ব্যবহার হবে।400w: একটি ছোট ছবি যা মোবাইল স্ক্রীনে ব্যবহার হবে।
sizes: এখানে, ব্রাউজারটি প্রতিটি স্ক্রীন সাইজ অনুযায়ী ছবি নির্বাচন করবে।(max-width: 600px) 400px: যখন স্ক্রীনের প্রস্থ 600px বা কম হবে, তখন 400px চওড়া ইমেজটি ব্যবহার করবে।800px: অন্য সব ক্ষেত্রে 800px চওড়া ইমেজটি ব্যবহার করবে।
src: ডিফল্ট ইমেজ যা ব্রাউজার আগে লোড করবে যদিsrcsetকাজ না করে।
এটি উন্নত ইমেজ ব্যবস্থাপনা প্রযুক্তি এবং ওয়েব পেজ লোডিং টাইম কমানোর জন্য বেশ কার্যকরী।
3. Responsive Background Image with Pure.CSS
Pure.CSS এর মাধ্যমে আপনি background-image ব্যবহার করে রেসপনসিভ ইমেজও তৈরি করতে পারেন। এটি সাইড বা ব্যাকগ্রাউন্ড হিসেবে একটি ইমেজ সেট করতে সাহায্য করে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Background Image with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.responsive-bg {
background-image: url('https://via.placeholder.com/1200x800');
background-size: cover;
background-position: center;
width: 100%;
height: 400px;
}
@media (max-width: 600px) {
.responsive-bg {
background-image: url('https://via.placeholder.com/800x533');
height: 250px;
}
}
</style>
</head>
<body>
<div class="responsive-bg"></div>
</body>
</html>
ব্যাখ্যা:
.responsive-bg: এখানে আমরাbackground-imageব্যবহার করে একটি ইমেজ ব্যাকগ্রাউন্ড হিসেবে সেট করেছি।background-size: cover;প্রপার্টি ইমেজটিকে পুরো কন্টেইনারে ঢেকে দেবে।- Media Queries:
@media (max-width: 600px)ব্যবহার করে মোবাইল স্ক্রীনে ব্যাকগ্রাউন্ড ইমেজের আকার এবং ইমেজ পরিবর্তন করা হয়েছে।
এটি একটি খুবই সাধারণ পদ্ধতি, যেখানে ব্যাকগ্রাউন্ড ইমেজটি রেসপনসিভ হয়ে স্ক্রীনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।
Pure.CSS ব্যবহার করে Responsive Images তৈরি করা খুবই সহজ। আপনি CSS এর মাধ্যমে max-width, height, srcset, এবং background-image প্রপার্টি ব্যবহার করে আপনার ওয়েবসাইটে রেসপনসিভ ইমেজ তৈরি করতে পারেন। Responsive images আপনার ওয়েবসাইটের পারফরম্যান্স উন্নত করতে সাহায্য করে এবং বিভিন্ন স্ক্রীনে উপযুক্ত ইমেজ প্রদর্শন করতে সক্ষম হয়। Pure.CSS এর সহায়তায় আপনি সহজেই এই সুবিধাগুলো কার্যকরী করতে পারেন।
Pure.CSS একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক, যা ওয়েব ডেভেলপমেন্টে দ্রুত এবং সুন্দর ডিজাইন তৈরি করতে সাহায্য করে। এর মধ্যে Image Classes এবং Custom Image Styling এর জন্য প্রি-বিল্ট ক্লাস এবং স্টাইল রয়েছে, যা আপনাকে সহজে ইমেজগুলির স্টাইলিং করতে সহায়তা করে। এই ক্লাসগুলির মাধ্যমে আপনি ইমেজের আকার, সীমানা, গোলাকার কোণ, শ্যাডো, এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন।
১. Pure.CSS Image Classes:
Pure.CSS এর মধ্যে কিছু প্রি-বিল্ট ইমেজ ক্লাস রয়েছে, যা ইমেজের বিভিন্ন স্টাইল পরিবর্তন করতে সাহায্য করে। উদাহরণস্বরূপ:
a) pure-img:
এই ক্লাসটি ইমেজকে পুরোপুরি রেসপন্সিভ বানানোর জন্য ব্যবহৃত হয়। ইমেজের আকার স্বয়ংক্রিয়ভাবে তার প্যারেন্ট কন্টেইনারের আকার অনুযায়ী মানিয়ে নেবে।
<img src="image.jpg" class="pure-img" alt="Responsive Image">
b) pure-img-responsive:
এই ক্লাসটি ইমেজটিকে পুরোপুরি রেসপন্সিভ তৈরি করে, যাতে ইমেজটি তার কনটেইনারের আকার অনুযায়ী স্কেল হয়।
<img src="image.jpg" class="pure-img-responsive" alt="Responsive Image">
২. Custom Image Styling with Pure.CSS:
Pure.CSS দিয়ে ইমেজের কাস্টম স্টাইলিং করা খুবই সহজ। এখানে কিছু কাস্টম স্টাইলিংয়ের উদাহরণ দেওয়া হলো:
a) Rounded Images (গোলাকার ইমেজ):
কোনো ইমেজকে গোলাকার করতে border-radius ব্যবহার করা হয়। এখানে আমরা Pure.CSS এর .pure-img ক্লাস ব্যবহার করে ইমেজের কোণ গোলাকার করেছি।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Rounded Image Example</title>
<style>
.rounded-img {
border-radius: 50%; /* Make image round */
width: 200px;
height: 200px;
object-fit: cover; /* Crop the image to fit */
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/200" alt="Rounded Image" class="pure-img rounded-img">
</body>
</html>
b) Image with Border (ইমেজের চারপাশে বর্ডার):
ইমেজের চারপাশে বর্ডার দিতে border প্রপার্টি ব্যবহার করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Image with Border</title>
<style>
.bordered-img {
border: 5px solid #333;
padding: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/300" alt="Image with Border" class="pure-img bordered-img">
</body>
</html>
c) Image with Shadow (ইমেজে শ্যাডো):
ইমেজের চারপাশে শ্যাডো দেওয়ার জন্য box-shadow প্রপার্টি ব্যবহার করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Image with Shadow</title>
<style>
.shadow-img {
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/300" alt="Image with Shadow" class="pure-img shadow-img">
</body>
</html>
d) Image with Hover Effect (ইমেজে হোভার এফেক্ট):
আপনি ইমেজে হোভার ইফেক্টও যোগ করতে পারেন যাতে ব্যবহারকারী ইমেজের উপর মাউস রাখলে ইমেজটির স্টাইল পরিবর্তিত হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Image Hover Effect</title>
<style>
.hover-img {
transition: transform 0.3s ease;
}
.hover-img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/300" alt="Hover Effect Image" class="pure-img hover-img">
</body>
</html>
৩. Image with Text Overlay:
ইমেজের উপর টেক্সট অ.overlay এর মাধ্যমে যুক্ত করা খুবই জনপ্রিয় একটি স্টাইল। নিচে এমন একটি উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Image with Text Overlay</title>
<style>
.image-container {
position: relative;
width: 100%;
max-width: 400px;
}
.image-container img {
width: 100%;
height: auto;
}
.image-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
.image-container:hover .image-overlay {
opacity: 1;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://via.placeholder.com/400" alt="Image with Text Overlay">
<div class="image-overlay">Overlay Text</div>
</div>
</body>
</html>
Pure.CSS ইমেজ স্টাইলিংয়ের জন্য বেশ কিছু প্রি-বিল্ট ক্লাস প্রদান করে, যা ব্যবহার করে আপনি ইমেজগুলোকে সহজে স্টাইল করতে পারবেন। আপনি চাইলে কাস্টম CSS ব্যবহার করে ইমেজের গোলাকার কোণ, শ্যাডো, বর্ডার, হোভার ইফেক্ট, বা টেক্সট ওভারলে ইত্যাদি যোগ করতে পারেন। Pure.CSS এর সহজ স্টাইলিংয়ের মাধ্যমে ইমেজগুলোকে আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব বানানো সম্ভব।
Pure.CSS ফ্রেমওয়ার্কে Media Queries এবং Responsive Design সহজভাবে ব্যবহার করা যায়, যা ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটকে বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত করতে সহায়তা করে। Media Queries হল একটি শক্তিশালী CSS টেকনিক, যার মাধ্যমে আপনি বিভিন্ন ডিভাইসের জন্য আলাদা স্টাইল রুলস প্রযোজ্য করতে পারেন। Pure.CSS ফ্রেমওয়ার্কও এর মধ্যে বেশ কিছু responsive ফিচার সরবরাহ করে, যা সহজে ওয়েবসাইটকে বিভিন্ন স্ক্রীনে সঠিকভাবে সাজাতে সাহায্য করে।
1. Media Queries কী এবং কেন ব্যবহার করবেন?
Media Queries CSS-এর একটি ফিচার যা ওয়েব পেজের উপস্থাপন (presentation) কন্ট্রোল করতে ব্যবহৃত হয়। এটি নির্দিষ্ট স্ক্রীন সাইজ বা ডিভাইস অনুযায়ী CSS পরিবর্তন করার সুযোগ দেয়। ওয়েব ডিজাইনে Responsive Design অর্জন করতে এটি অত্যন্ত গুরুত্বপূর্ণ।
Media Queries ব্যবহার করে আপনি ওয়েব পেজের লেআউট, টেক্সট সাইজ, ইমেজ সাইজ ইত্যাদি কাস্টমাইজ করতে পারেন, যাতে আপনার সাইটটি ডেস্কটপ, ট্যাবলেট এবং মোবাইল স্ক্রীনে সঠিকভাবে কাজ করে।
2. Pure.CSS এবং Media Queries
Pure.CSS একটি "mobile-first" CSS ফ্রেমওয়ার্ক, অর্থাৎ এটি ডিজাইন করা হয়েছে এমনভাবে যে প্রথমে মোবাইল ডিভাইসের জন্য উপযুক্ত হবে এবং পরে বড় স্ক্রীন বা ডিভাইসগুলির জন্য কাস্টমাইজ করা যাবে। Pure.CSS তে কিছু মডিউল এমনভাবে ডিজাইন করা হয়েছে যাতে আপনি সহজেই responsive ওয়েবসাইট তৈরি করতে পারেন।
3. Responsive Grid System
Pure.CSS-এর গ্রিড সিস্টেম একটি mobile-first গ্রিড সিস্টেম, যা media queries ব্যবহার করে ওয়েবসাইটকে বিভিন্ন স্ক্রীন সাইজের জন্য অ্যাডজাস্ট করতে সহায়তা করে।
উদাহরণ:
<link rel="stylesheet" href="https://purecss.io/build/pure-min.css">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
<p>This content will take up 100% of the screen on small devices, 50% on medium devices, and 33% on large devices.</p>
</div>
</div>
এখানে, pure-u-1, pure-u-md-1-2, এবং pure-u-lg-1-3 ক্লাসগুলি ব্যবহার করা হয়েছে, যা স্ক্রীন সাইজ অনুসারে কন্টেন্টের প্রস্থ অ্যাডজাস্ট করবে:
pure-u-1: ছোট স্ক্রীনে (মোবাইল) পুরো প্রস্থ নিবে।pure-u-md-1-2: মিডিয়াম স্ক্রীনে (ট্যাবলেট) ৫০% প্রস্থ নিবে।pure-u-lg-1-3: বড় স্ক্রীনে (ডেস্কটপ) ৩৩% প্রস্থ নিবে।
4. Basic Media Query উদাহরণ
এখানে একটি সাধারণ media query উদাহরণ দেয়া হলো যা সাইটের লেআউট কাস্টমাইজ করতে ব্যবহৃত হবে, যাতে এটি বিভিন্ন স্ক্রীনে সুন্দরভাবে কাজ করে।
উদাহরণ:
<style>
/* Default styles for small devices */
body {
font-size: 14px;
}
/* Media Query for screens 600px or wider (tablet and up) */
@media (min-width: 600px) {
body {
font-size: 16px;
}
}
/* Media Query for screens 1024px or wider (desktop and up) */
@media (min-width: 1024px) {
body {
font-size: 18px;
}
}
</style>
এখানে:
- ডিফল্ট স্টাইলগুলো মোবাইল ডিভাইসের জন্য এবং ১৪px ফন্ট সাইজ নির্ধারণ করা হয়েছে।
@media (min-width: 600px)মিডিয়াম স্ক্রীনের জন্য, যেমন ট্যাবলেট এবং তার উপরের ডিভাইস, ফন্ট সাইজ ১৬px হবে।@media (min-width: 1024px)বড় স্ক্রীনের জন্য (ডেস্কটপ), ফন্ট সাইজ ১৮px হবে।
5. Responsive Menu Example (রেসপন্সিভ মেনু)
Pure.CSS এর মাধ্যমে সহজে রেসপন্সিভ মেনু তৈরি করা যায়, যা ছোট স্ক্রীনে (মোবাইল) একটি হ্যামবার্গার মেনু হিসেবে কাজ করবে এবং বড় স্ক্রীনে একটি সাধারণ ন্যাভিগেশন বার হিসাবে দেখাবে।
উদাহরণ:
<link rel="stylesheet" href="https://purecss.io/build/pure-min.css">
<nav class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">My Website</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Services</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
</nav>
<style>
@media (max-width: 600px) {
.pure-menu-horizontal {
display: block;
}
.pure-menu-list {
display: none;
}
.pure-menu-heading {
cursor: pointer;
}
}
</style>
এখানে:
pure-menu-horizontalক্লাসে একটি সাধারণ হরিজেন্টাল মেনু তৈরি করা হয়েছে।- মিডিয়া কোয়েরি ব্যবহার করে, ছোট স্ক্রীনে মেনুটি ব্লক আকারে রূপান্তরিত হবে, এবং
pure-menu-listএর শো/হাইড করা যাবে।
6. Using Pure.CSS Grid for Responsive Layouts
Pure.CSS এর grid system দিয়ে আপনি খুব সহজে রেসপন্সিভ লেআউট তৈরি করতে পারবেন। আপনি pure-g (grid container) এবং pure-u-* (grid unit) ক্লাস ব্যবহার করে বিভিন্ন স্ক্রীন সাইজের জন্য লেআউট অ্যাডজাস্ট করতে পারবেন।
উদাহরণ:
<link rel="stylesheet" href="https://purecss.io/build/pure-min.css">
<div class="pure-g">
<div class="pure-u-1-2 pure-u-md-1-4 pure-u-lg-1-6">
<p>Content 1</p>
</div>
<div class="pure-u-1-2 pure-u-md-1-4 pure-u-lg-1-6">
<p>Content 2</p>
</div>
<div class="pure-u-1-2 pure-u-md-1-4 pure-u-lg-1-6">
<p>Content 3</p>
</div>
<div class="pure-u-1-2 pure-u-md-1-4 pure-u-lg-1-6">
<p>Content 4</p>
</div>
</div>
এখানে, pure-u-1-2, pure-u-md-1-4, এবং pure-u-lg-1-6 ক্লাসগুলি ব্যবহার করে, কন্টেন্টের প্রস্থ সেগুলির জন্য ভিন্ন ভিন্ন স্ক্রীন সাইজ অনুযায়ী কাস্টমাইজ করা হয়েছে।
Pure.CSS এবং Media Queries ব্যবহার করে আপনি সহজে responsive ওয়েব ডিজাইন তৈরি করতে পারবেন। Mobile-first পদ্ধতি, media queries এবং Pure.CSS grid system ব্যবহার করে বিভিন্ন স্ক্রীন সাইজে ওয়েবসাইটের উপস্থাপন দ্রুত এবং কার্যকরীভাবে কাস্টমাইজ করা যায়। Pure.CSS ফ্রেমওয়ার্কের মডুলার এবং হালকা ডিজাইন আপনাকে সহজে রেসপন্সিভ ওয়েবসাইট তৈরি করতে সহায়তা করবে।
Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক যা আপনাকে responsive ডিজাইন তৈরি করতে সহায়তা করে। Custom Media Queries ব্যবহার করে, আপনি ওয়েব পেজের স্টাইল পরিবর্তন করতে পারেন, যাতে তা বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে কাজ করে। Media Queries হল CSS-এর একটি শক্তিশালী ফিচার যা আপনাকে নির্দিষ্ট স্ক্রীন সাইজ বা ডিভাইসের জন্য স্টাইল প্রয়োগ করতে সক্ষম করে।
এই আর্টিকেলে, আমরা Pure.CSS এর সাথে Custom Media Queries ব্যবহার করে বিভিন্ন স্ক্রীন সাইজের জন্য কাস্টমাইজড স্টাইল তৈরি করার উপায় দেখব।
1. Basic Structure of Media Queries
Media Queries ব্যবহার করার মাধ্যমে, আপনি স্ক্রীনের প্রস্থ, উচ্চতা, রেজোলিউশন ইত্যাদি নির্ধারণ করে স্টাইল প্রয়োগ করতে পারেন। সাধারণত, আপনি min-width এবং max-width ব্যবহার করে বিভিন্ন ডিভাইসের জন্য স্টাইল সেট করতে পারেন।
Syntax:
@media (min-width: 600px) {
/* CSS Rules for devices with a width of 600px or larger */
}
@media (max-width: 600px) {
/* CSS Rules for devices with a width of 600px or smaller */
}
2. Custom Media Queries for Different Screen Sizes
এখানে আমরা Pure.CSS ব্যবহার করে বিভিন্ন স্ক্রীন সাইজের জন্য কাস্টম মিডিয়া কোয়েরি তৈরি করার উদাহরণ দেখবো। আপনি সাধারণত mobile, tablet, desktop এবং large screen এর জন্য আলাদা স্টাইল প্রয়োগ করতে পারবেন।
উদাহরণ: Custom Media Queries in Pure.CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Default styles for large screens */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
}
.content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box {
background-color: lightblue;
margin: 10px;
padding: 20px;
flex: 1;
}
/* Media Query for Tablets (screen width 600px to 900px) */
@media (max-width: 900px) and (min-width: 600px) {
.box {
flex: 0 0 45%;
}
}
/* Media Query for Mobile Devices (screen width below 600px) */
@media (max-width: 600px) {
.box {
flex: 0 0 100%;
margin: 10px 0;
}
}
/* Media Query for Large Desktop Screens (screen width above 1200px) */
@media (min-width: 1200px) {
.container {
width: 70%;
}
.box {
flex: 0 0 30%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Design Example</h1>
<div class="content">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Default Layout (Large Screens):
- ডিফল্ট স্টাইলের মধ্যে, আমরা
flexবক্স লেআউট ব্যবহার করেছি যেখানে তিনটি বক্সের জন্য যথাক্রমে সমান প্রস্থ দেওয়া হয়েছে। এটি ডেস্কটপের জন্য ডিজাইন করা হয়েছে। .box { flex: 1; }— এই স্টাইলটি বড় স্ক্রীনে তিনটি বক্সকে সমান প্রস্থে ভাগ করে।
- ডিফল্ট স্টাইলের মধ্যে, আমরা
- Tablet Layout (Max Width 900px):
- যখন স্ক্রীনের প্রস্থ 600px থেকে 900px এর মধ্যে থাকে, তখন
.boxউপাদানটি 45% প্রস্থে প্রদর্শিত হবে। @media (max-width: 900px) and (min-width: 600px)— এই মিডিয়া কোয়েরি ট্যাবলেট বা মাঝারি আকারের স্ক্রীনের জন্য স্টাইল প্রয়োগ করে।
- যখন স্ক্রীনের প্রস্থ 600px থেকে 900px এর মধ্যে থাকে, তখন
- Mobile Layout (Max Width 600px):
- মোবাইল স্ক্রীনে (600px এর কম), প্রতিটি
.boxউপাদান 100% প্রস্থে প্রদর্শিত হবে এবং একে অপরের নিচে প্রদর্শিত হবে। @media (max-width: 600px)— এই মিডিয়া কোয়েরি মোবাইল ডিভাইসের জন্য স্টাইল প্রয়োগ করে।
- মোবাইল স্ক্রীনে (600px এর কম), প্রতিটি
- Large Desktop Layout (Min Width 1200px):
- বড় ডেস্কটপ স্ক্রীনে
.containerএর প্রস্থ 70% হবে এবং.boxউপাদানগুলি 30% প্রস্থে প্রদর্শিত হবে। @media (min-width: 1200px)— বড় স্ক্রীনের জন্য এই স্টাইলটি ব্যবহৃত হয়।
- বড় ডেস্কটপ স্ক্রীনে
3. Explanation of Common Media Query Breakpoints
- Mobile Devices:
(max-width: 600px)— এটি সাধারণত মোবাইল ডিভাইসের জন্য ব্যবহৃত হয়। এখানে, স্টাইলগুলি মোবাইলের ছোট স্ক্রীনের জন্য কাস্টমাইজ করা হয়। - Tablets:
(max-width: 900px) and (min-width: 600px)— এটি ট্যাবলেট ডিভাইসের জন্য ব্যবহৃত হয়, যেখানে স্ক্রীনের প্রস্থ 600px থেকে 900px এর মধ্যে থাকে। - Laptops and Desktops:
(min-width: 1200px)— এটি সাধারণত ডেস্কটপ এবং বড় স্ক্রীনের জন্য ব্যবহৃত হয়।
4. Media Query Tips for Better Responsive Design
- Mobile First Approach: সর্বদা প্রথমে মোবাইলের জন্য ডিজাইন করুন। তারপরে বড় স্ক্রীন সাইজগুলির জন্য মিডিয়া কোয়েরি ব্যবহার করুন। এটি আপনাকে আরও রেসপন্সিভ ডিজাইন তৈরি করতে সাহায্য করবে।
- Use
min-widthfor Larger Screens: বড় স্ক্রীন সাইজের জন্যmin-widthমিডিয়া কোয়েরি ব্যবহার করা উচিত, যেহেতু এটি মোবাইল স্ক্রীন থেকে বড় স্ক্রীনে স্টাইল পরিবর্তন করতে সাহায্য করবে। - Flexible Layouts: Flexbox এবং CSS Grid ব্যবহার করলে, স্ক্রীন সাইজের উপর ভিত্তি করে উপাদানগুলির অবস্থান এবং আকার সহজে কাস্টমাইজ করা যাবে।
Pure.CSS এর সাথে Custom Media Queries ব্যবহার করে আপনি ওয়েব পেজের ডিজাইন এবং লেআউটকে বিভিন্ন স্ক্রীন সাইজের জন্য অপটিমাইজ করতে পারেন। মিডিয়া কোয়েরি ব্যবহার করে, আপনি মোবাইল, ট্যাবলেট, এবং ডেস্কটপের জন্য আলাদা স্টাইল প্রয়োগ করতে পারবেন। Pure.CSS এর গ্রিড সিস্টেম এবং অন্যান্য স্টাইলিং ফিচারগুলির মাধ্যমে, আপনি দ্রুত এবং সহজে একটি রেসপন্সিভ ডিজাইন তৈরি করতে পারেন।
Read more
